<template>
	<view class="container">
		<view class="tui-page__hd">
			<view class="tui-page__title">表单验证</view>
			<view class="tui-page__desc">结合原生form表单验证</view>
		</view>
		<view class="tui-page__bd">
			<tui-form ref="form">
				<form @submit="submit">
					<tui-input label="姓名" borderTop placeholder="请输入姓名" name="name"></tui-input>
					<tui-input label="手机号" :lineLeft="false" placeholder="请输入手机号" name="mobile"></tui-input>
					<tui-input label="邮箱" :lineLeft="false" placeholder="请输入邮箱" name="email"></tui-input>
					<tui-input label="身份证" :lineLeft="false" placeholder="请输入身份证号码" name="idCard"></tui-input>
					<tui-input label="密码" password :lineLeft="false" placeholder="请输入密码" name="password">
					</tui-input>
					<tui-input label="确认密码" password :lineLeft="false" placeholder="请输入确认密码" name="confirmPwd">
					</tui-input>
					<tui-input label="金额" :lineLeft="false" placeholder="请输入金额,允许保留两位小数" name="amount">
					</tui-input>
					<view class="tui-title thorui-cells">请选择性别</view>
					<tui-radio-group name="sex">
						<tui-label v-for="(item,index) in radioItems" :key="index">
							<tui-list-cell>
								<view class="thorui-flex__between">
									<text class="tui-text">{{item.name}}</text>
									<tui-radio isCheckMark checkMarkColor="#5677fc" :scaleRatio="1.3"
										:checked="item.checked" :value="item.value">
									</tui-radio>
								</view>
							</tui-list-cell>
						</tui-label>
					</tui-radio-group>
					<view class="tui-title thorui-cells">更多验证请参考文档</view>
					<view class="tui-btn__box thorui-flex__center">
						<tui-button width="400rpx" height="84rpx" bold formType="submit">提交</tui-button>
					</view>
				</form>
			</tui-form>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			const rules = [{
				name: "name",
				rule: ["required", "isChinese", "minLength:2", "maxLength:6"],
				msg: ["请输入姓名", "姓名必须全部为中文", "姓名必须2个或以上字符", "姓名不能超过6个字符"]
			}, {
				name: "mobile",
				rule: ["required", "isMobile"],
				msg: ["请输入手机号", "请输入正确的手机号"]
			}, {
				name: "email",
				rule: ["required", "isEmail"],
				msg: ["请输入邮箱", "请输入正确的邮箱"]
			}, {
				name: "idCard",
				rule: ["required", "isIdCard"],
				msg: ["请输入身份证号码", "请输入正确的身份证号码"]
			}, {
				name: "password",
				rule: ["required", "isEnAndNo"],
				msg: ["请输入密码", "密码为8~20位数字和字母组合"]
			}, {
				name: "confirmPwd",
				rule: ["required", "isSame:password"],
				msg: ["请输入确认密码", "两次输入的密码不一致"]
			}, {
				name: "amount",
				rule: ["required", "isAmount"],
				msg: ["请输入金额", "请输入正确的金额，允许保留两位小数"]
			}, {
				name: "sex",
				rule: ["required"],
				msg: ["请选择性别"]
			}];
			return {
				radioItems: [{
					name: '男',
					value: '1'
				}, {
					name: '女',
					value: '2'
				}],
				//表单数据
				formData: {},
				rules: rules
			}
		},
		methods: {
			submit(e) {
				this.formData = e.detail.value;
				this.$refs.form.validate(this.formData, this.rules).then(res => {
					console.log(this.formData)
					this.tui.toast('校验通过！')
				}).catch(errors => {
					console.log(errors)
				})
			}
		}
	}
</script>

<style>
	.tui-title {
		width: 100%;
		font-size: 28rpx;
		color: #888;
		padding: 30rpx;
		box-sizing: border-box;
	}

	.tui-text {
		padding-left: 12rpx;
	}

	.tui-btn__box {
		padding: 60rpx 0;
	}
</style>
